html,body{width:100%;height:100%;background-color:#000;}
.main{width:100%;height:100%;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;-webkit-user-select:none;-moz-user-select:none}
.main video{width:100%;height:100%}

.rightArea{width:60px;height:200px;position:absolute;bottom:20px;right:20px;z-index:999}
.rightArea li{width:60px;height:60px;position:relative;}
.rightArea li:first-child{height:70px;}
.rightArea li img{width:58px;height:58px;border:#fff solid 1px;border-radius:50%;;object-fit:cover;-webkit-object-fit:cover}
.rightArea li span{width:60px;height:20px;line-height:20px;color:#fff;font-size:12px;background-color:#bbb;border-radius:25px;position:absolute;left:0;bottom:3px}
.rightArea li em{color:#fff;margin-top:18px;font-size:24px}
.rightArea li p{width:100%;line-height:30px;font-size:12px;text-align:center;color:#fff;}
.back{width:40px;height:40px;line-height:40px;background:rgba(0,0,0,0.3);border-radius:50%;position:absolute;top:20px;left:20px;z-index:999;}
.back em{color:#fff}


.main .mbox{width:100%;height:100%;position:absolute;z-index:2;-webkit-transition:transform .5s;transition:transform .5s}

@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg);}50%{-webkit-transform:rotate(180deg);}100%{-webkit-transform:rotate(360deg);}}
.rotate {-webkit-animation:loading 2s infinite linear}  
#loading{width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;display: flex;align-items: center;text-align:center;-webkit-transition:transform .5s;transition:transform .5s}
#loading div{width:100px;margin:0 auto;color:#999;}
#loading i{font-size:50px}
#loading span{display:block;margin-top:20px;}
#loading.on{transform:translateY(0px)}
#loading.off_down{transform:translateY(-100vh)}
#loading.off_up{transform:translateY(100vh)}